@extends('layouts.appDomain')
@section('title')技能树 - @endsection
@section('style')
<style>
.el-card.selected {}

.el-card.selected .el-card__body,
.el-card.selected:hover .el-card__body {
    background-color: #ecf7fa;
    border: 5px solid #3badff;
    padding: 5px 5px;
}

.el-card .el-card__body {
    background-color: #ecf7fa;
    cursor: pointer;
    border: 5px solid #ecf7fa;
    padding: 5px 5px;
}

.spell {
    position: absolute;
    right: 0;
    top: 0px;
    text-align: end;
}

.spell .small {
    font-size: 12px;
    color: #b9b9b9;
}

.spell .num {
    font-size: 40px;
    line-height: 35px;
}

img.el-tooltip{
    /*border: 1px solid #6a737d;*/
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}


img.el-tooltip.learned{
    /*border: 1px solid #78ff2a;*/
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}
.can{
    font-weight: bold;
    color: #4fc627;
}

.learned{
    font-weight: normal;
    color: #e8b024;
}

</style>
@endsection

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card panel">



                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="form-group">
                                <div class="card-header mb-3">角色列表 <span class="small">点击选择</span>
                                </div>
                                <el-row :gutter="10">
                                    <el-col style="padding-bottom: 10px"
                                            v-for="(char,index) in characters" :key="index">
                                        <el-card shadow="hover" :class="{selected:curChar.guid==char.guid}">
                                            <div @click=" changeChar(char)" style="position: relative;">
                                                <component-character-race :race="char.race"></component-character-race>
                                                <component-character-class :c="char.class"></component-character-class>
                                                <div class="spell">
                                        <span class="num">
                                            @{{ char.char.spellPoint }}
                                        </span>
                                                    <br>
                                                    <span class="small">
                                            <el-button size="mini" icon="el-icon-plus" @click="buyPoint" type="success"></el-button>
                                        </span>

                                                </div>

                                                <div class="mt-3">[ @{{ char.level }} ] @{{char.name}}</div>
                                            </div>

                                        </el-card>
                                    </el-col>

                                </el-row>

                            </div>
                        </el-col>
                        <el-col :span="16">
                            <div class="card-header">技能树</div>
                            <div v-if="curChar.guid>0">

                                <el-row >
                                    <el-col :span="0"><br><h6>公共技能树</h6>
                                        <el-tree :data="tree0" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="learnSpell">
                                            <div class="custom-tree-node" style="width: 100%" slot-scope="{ node, data }">

                                                <el-row>
                                                    <el-col :span="16">
                                                <span v-if="spellsInfo['s'+data.spellId] && spellsInfo['s'+data.spellId].name_zhcn">
                                                    <el-tooltip effect="dark" placement="right-start">
                                                        <div slot="content" class="wowhead-tooltip">
                                                            <table>
                                                                <tbody>
                                                                    <tr>
                                                                        <td v-html="spellsInfo['s'+data.spellId].tooltip_zhcn"></td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <img :src="'http://db.wowmanage.cn/static/images/wow/icons/medium/'+spellsInfo['s'+data.spellId].icon+'.jpg'"
                                                             alt="" :class="{can:data.can,learned:data.learned}" style=":filter: grayscale(100%);">
                                                    </el-tooltip>
                                                    @{{ spellsInfo['s'+data.spellId].name_zhcn }}
                                                </span>
                                                        <span v-else>
                                                    @{{ data.label??'【无技能】' }}
                                                </span>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div style="padding-left: 15px; font-size: 12px; text-align: end">
                                                            <template v-if="data.reqPoint>0">
                                                                技能点:@{{ data.reqPoint }}
                                                            </template>
                                                            <template v-if="data.reqLevel>1">
                                                                - 等级:@{{ data.reqLevel }}
                                                            </template>

                                                        </div>
                                                    </el-col>
                                                </el-row>


                                            </div>
                                        </el-tree>
                                    </el-col>
                                    <el-col :span="24">
                                        <br>
                                        <el-tree :data="tree" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="learnSpell">
                                            <div class="custom-tree-node" :class="{can:data.can,learned:data.learned}" style="width: 100%" slot-scope="{ node, data }">

                                                <el-row>
                                                    <el-col :span="16">
                                                <span v-if="spellsInfo['s'+data.spellId] && spellsInfo['s'+data.spellId].name_zhcn">
                                                    <el-tooltip effect="dark" placement="right-start">
                                                        <div slot="content" class="wowhead-tooltip">
                                                            <table>
                                                                <tbody>
                                                                    <tr>
                                                                        <td v-html="spellsInfo['s'+data.spellId].tooltip_zhcn"></td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <img :src="'http://db.wowmanage.cn/static/images/wow/icons/medium/'+spellsInfo['s'+data.spellId].icon+'.jpg'"
                                                             alt="" :class="{can:data.can,learned:data.learned}" style=":filter: grayscale(100%);">
                                                    </el-tooltip>
                                                    <span >
                                                        @{{ spellsInfo['s'+data.spellId].name_zhcn }}
                                                    </span>

                                                </span>
                                                        <span v-else>
                                                    @{{ data.label??'【无技能】' }}
                                                </span>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div style="padding-left: 15px; font-size: 12px; text-align: end">
                                                            <template v-if="data.reqPoint>0">
                                                                技能点:@{{ data.reqPoint }}
                                                            </template>
                                                            <template v-if="data.reqLevel>1">
                                                                - 等级:@{{ data.reqLevel }}
                                                            </template>

                                                        </div>
                                                    </el-col>
                                                </el-row>


                                            </div>
                                        </el-tree>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-else>
                                <br><br>
                                <el-alert title="请选择一个角色" type="warning" center show-icon>
                                </el-alert>
                            </div>
                        </el-col>
                    </el-row>




                </div>


            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
let vm = new Vue({
    el: '#app',
    data: {
        a: 2,
        characters: [],
        curChar:{},
        spellMall: null,
        cats: [],
        curCatId: 0,
        curCatIdTab: 'tab0',
        spellsInfo:[],
        tree0:[],
        tree:[],
    },
    created: function() {
        console.log(this.a)
    },
    mounted() {
        this.getData();
    },
    watch: {
        curCatIdTab() {
            this.curCatId = parseInt(this.curCatIdTab.substr(3));
        }
    },
    methods: {
        learnSpell(data){
            const t = this;
            if (data.can){
                if (data.learned){
                    t.$message.error('已习得此技能');
                }else{
                    if (t.curChar.char.spellPoint<data.reqPoint){
                        t.$message.error('技能点不足');
                    }else{
                        t.$confirm('确定使用 '+data.reqPoint+'技能点 学习此技能?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            post("/user/mallspell/buy",{char:t.curChar.char,spellId:data.spellId},res=>{
                                debugger;
                                if (res.err===0) {
                                    t.curChar.char.spellPoint-=data.reqPoint;
                                    data.learned=true;
                                    t.curChar.char.spells.push({
                                        char_id: t.curChar.char.id,
                                        spell_id: data.spellId,
                                        price: data.reqPoint,
                                    })
                                    data.children.forEach(e => {
                                        e.can = true;
                                    })
                                    t.$message({
                                        type: 'success',
                                        message: '学习成功!'
                                    });
                                }else{
                                    t.$message.error(res.msg);
                                }
                            },t);
                        }).catch(() => { });
                    }
                }
            }else{
                t.$message.error('此技能不可学习');
            }
            console.log(data);
        },
        changeChar(char){
            let t=this;
            t.curChar=char;
            let _tree0=JSON.parse(t.spellMall['spellTree0']===''?'[]':t.spellMall['spellTree0']);
            let _tree=JSON.parse(t.spellMall['spellTree'+char.class]===''?'[]':t.spellMall['spellTree'+char.class]);
            _tree0.forEach(e=>{
                t.getSpellInfo(e.spellId);
                t.loadSpellInfo(e,true)
            })
            _tree.forEach(e=>{
                t.getSpellInfo(e.spellId);
                t.loadSpellInfo(e,true)
            })
            t.tree0=_tree0;
            t.tree=_tree;
        },
        loadSpellInfo(data,flag) {
            data.can=flag;
            data.learned=false;
            const t = this;
            t.curChar.char.spells.forEach(e=>{
                if (parseInt(e.spell_id)===parseInt(data.spellId)){
                    data.learned=true;
                }
            });

            data.children.forEach(e => {
                t.getSpellInfo(e.spellId);
                t.loadSpellInfo(e,data.learned);
            })
        },
        getSpellInfo(spellId) {
            let t = this;
            if (t.spellsInfo['s' + spellId]) {
                return;
            }
            post("/user/getSpellInfo", {
                id: spellId
            }, res => {
                t.$nextTick(() => {
                    Vue.set(t.spellsInfo, 's' + spellId, res.data);
                })
            }, t, null, false);
        },
        buyPoint() {
            let t=this;
            t.$prompt('请输入要兑换的技能点数量：'+t.spellMall.spellPointRatio+'积分 => 1技能点', '兑换技能点', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[1-9]{1}\d{0,5}$/,
                inputErrorMessage: '格式不正确'
            }).then(({ value }) => {
                post("/user/mallspell/buyPoint", {value:value,guid:t.curChar.guid}, res => {
                    console.log(res)
                    t.curChar.char.spellPoint+=parseInt(value);
                    $('.money').html('积分：'+parseInt(res.data.player.money));
                    t.$message.success('兑换成功');
                }, t);
            }).catch(() => {});
        },
    getData: function() {
        var t = this;
        post("/user/mallspell/getData", {}, res => {
            t.characters = res.data.characters
            t.spellMall = res.data.spellMall
            console.log(res)
        }, t);
    },
    buyGoods: function(goodsId, count) {
        var t = this;
        if (!t.curChar.guid) {
            t.$message.error('请选择角色');
            return;
        }
        count = parseInt(count)
        if (!count > 0) {
            t.$message.error('请输入购买数量');
            return
        }
        console.log(t.curChar.guid, goodsId, count)
        post("/user/mall/buy", {
            guid: t.curChar.guid,
            goodsId: goodsId,
            count: count
        }, res => {
            if (res.err === 0) {
                t.$alert(res.msg, '结果', {
                    confirmButtonText: '确定',
                    callback: action => {
                        // location.reload()
                        $(".nav-item .money").html('积分：' + res.data);
                    }
                });
            } else {
                t.$message.error(res.msg);
            }

        }, t);
    }
}
})
</script>
@endsection

